<template>
  <div id="cards">
    <div v-for="(card, a) in cards" :key="a" class="card-item">
      <div class="card-header">
        <div class="card-header-left">{{ card.title }}</div>
        <div class="card-header-center">日商品数量</div>
      </div>
      <!--      <dv-percent-pond :config="contentChart" style="width:200px;height:100px;margin-left: 20%;margin-bottom: 10%" />-->
      <div class="card-footer">
        <div class="card-footer-item">
          <div class="footer-detail">
            <dv-digital-flop :config="card.total" style="width:100%;height:35px;" />
            万元
          </div>
        </div>
        <div class="card-footer-item">
          <div class="footer-detail">
            <dv-digital-flop :config="card.num" style="width:70%;height:35px;" />个
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Cards',
  data() {
    return {
      cards: [],
      contentChart: {},
      cardData: []
    }
  },
  watch: {
    cardData: {
      handler(newVal, oldVal) {
        this.createData()
      },
      // 立即处理 进入页面就触发
      immediate: true,
      deep: true // 深度监听，监听到更深层级值的变化
    }
  },
  mounted() {
    if (this.cardData.length === 0) {
      this.cardData = new Array(5).fill(0).map((foo, i) => {
        return {
          'day': foo,
          'total': foo,
          'money': foo
        }
      })
    }
    this.createData()
  },
  methods: {
    createData() {
      const fullWidth = 300
      const borderGap = 3
      const borderWidth = 3
      const usefulWidth = fullWidth - (borderGap + borderWidth) * 2

      const pieceLength = [0.25, 0.5, 0.25]
      const pieceGap = 3

      const lineDash = pieceLength
        .map(l => [usefulWidth * l, pieceGap])
        .reduce((all, current) => [...all, ...current], [])
      this.contentChart = {
        value: 100,
        colors: ['#01c4f9', '#c135ff'],
        lineDash: lineDash
      }
      this.cards = []
      this.cardData.forEach((foo, i) => {
        this.cards.push({
          title: foo.day,
          total: {
            number: [foo.money],
            content: '{nt}',
            textAlign: 'right',
            style: {
              fill: '#ea6027',
              fontSize: 16
            },
            formatter: (number) => {
              const numbers = number.toString().split('').reverse()
              const segs = []

              while (numbers.length) segs.push(numbers.splice(0, 3).join(''))

              return segs.join(',').split('').reverse().join('')
            }
          },
          num: {
            number: [foo.total],
            content: '{nt}',
            textAlign: 'right',
            style: {
              fill: '#26fcd8',
              fontSize: 16
            },
            formatter: (number) => {
              const numbers = number.toString().split('').reverse()
              const segs = []

              while (numbers.length) segs.push(numbers.splice(0, 3).join(''))

              return segs.join(',').split('').reverse().join('')
            }
          }
        })
      })
    }
  }
}
</script>

<style lang="scss">
  .dv-percent-pond {
    text {
      display: none;
    }
  }

  #cards {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    height: 35%;

    .card-item {
      background-color: rgba(6, 30, 93, 0.5);
      border-top: 2px solid rgba(1, 153, 209, .5);
      width: 19%;
      display: flex;
      flex-direction: column;
    }

    .card-header {
      display: flex;
      height: 20%;
      align-items: center;
      justify-content: space-between;

      .card-header-left {
        font-size: 18px;
        font-weight: bold;
        padding-left: 20px;
      }

      .card-header-right {
        padding-right: 20px;
        font-size: 40px;
        color: #03d3ec;
      }
    }

    .ring-charts {
      height: 55%;
    }

    .card-footer {
      height: 25%;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }

    .card-footer-item {
      padding: 5px 10px 0px 10px;
      box-sizing: border-box;
      width: 40%;
      background-color: rgba(6, 30, 93, 0.7);
      border-radius: 3px;

      .footer-title {
        font-size: 15px;
        margin-bottom: 5px;
      }

      .footer-detail {
        font-size: 20px;
        color: #1294fb;
        display: flex;
        font-size: 18px;
        align-items: center;

        .dv-digital-flop {
          margin-right: 5px;
        }
      }
    }
  }
</style>
